import React, { useEffect } from "react";
import styled from "styled-components";
import cryImg from "./login_icon_registration_regret.png";
import { rem } from "@utils/UtilsFunc";
import uuid from "uuid-random";
import Loader from "@components/Loader";
// import api from "@api";
import { Toast } from "antd-mobile";

const Wrapper = styled.div`
  padding-top: ${rem(58)};
  display: flex;
  flex-direction: column;
  align-items: center;

  div > img {
    width: ${rem(70)};
    height: ${rem(70)};
  }
`;

function ErrorFallback({ error, resetErrorBoundary }) {
  useEffect(() => {
    // 在此进行错误报送
    // api.uploadErrorMsg(error.stack).then((res) => {
    //   console.log("error.stack", error.stack);
    // });
  }, []);

  return (
    <Wrapper>
      <div>
        <img src={cryImg} alt="cryImg" />
      </div>
      <p style={{ textAlign: "center", marginTop: rem(20), lineHeight: rem(28) }}>
        很抱歉！网络异常！
        <br />
        请提供本页截图联系客服，谢谢您的支持！
        <br />
      </p>
      <div style={{ textAlign: "center", marginTop: rem(9), color: "#333", fontSize: rem(12) }}>
        客服热线：40088-40088
      </div>
    </Wrapper>
  );
}

export default ErrorFallback;
